
<template>
  <a-card :bordered="false" :bodyStyle="{ height: '100%', padding: '0 16px 16px' }">
    <div class="accountBalance">
      <div class="title">
        帐户余额(元)
        <a style="float: right" @click="showInstructions = true">计费说明</a>
      </div>
      <div class="balanceNum">
        <span class="text"> {{ surplus }} </span>
        <a-button type="primary" @click="warning"> 充 值 </a-button>
      </div>
    </div>
    <div class="table-page-search-wrapper">
      <div style="position: relative">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="搜索订单:">
                <a-input
                  v-model="keywords"
                  placeholder="请输入订单号(回车搜索)"
                  style="width: 80%"
                  @pressEnter="$refs.table.refresh(true)"
                >
                  <a-tooltip slot="suffix" title="搜索订单">
                    <a-icon type="search" style="color: rgba(0, 0, 0, 0.45)" @click="$refs.table.refresh(true)" />
                  </a-tooltip>
                </a-input>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="创建时间">
                <a-range-picker @change="onChange1" style="width: 80%" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="订单类型:">
                <a-select v-model="queryParam.type" placeholder="请选择" allowClear style="width: 80%">
                  <a-select-option :value="1">上课扣费</a-select-option>
                  <a-select-option :value="2">录制扣费</a-select-option>
                  <a-select-option :value="3">充值</a-select-option>
                  <a-select-option :value="4">赠送</a-select-option>
                  <a-select-option :value="5">其他</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <!-- <template v-if="showSearch">
              <a-col :md="8" :sm="24">
                <a-form-item label="订单状态">
                  <a-select placeholder="请选择" allowClear style="width: 80%" v-model="queryParam.status">
                    <a-select-option :value="1">待支付</a-select-option>
                    <a-select-option :value="2">已支付</a-select-option>
                    <a-select-option :value="3">已生效</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </template> -->
          </a-row>
        </a-form>
        <!-- <a style="cursor: pointer" v-if="showSearch" @click="showSearch = !showSearch" id="moreButton">
          收起
          <a-icon type="up"></a-icon>
        </a>
        <a style="cursor: pointer" v-if="!showSearch" @click="showSearch = !showSearch" id="moreButton">
          展开
          <a-icon type="down"></a-icon>
        </a> -->
      </div>
    </div>
    <a-modal
      title="计费说明"
      :visible="showInstructions"
      @cancel="showInstructions = false"
      :width="880"
      :bodyStyle="{ 'max-height': '600px', overflowY: 'auto' }"
    >
      <template slot="footer">
        <a-button type="primary" @click="showInstructions = false">关闭</a-button>
      </template>
      <div class="charge-explain-modal" v-if="sysSetting && sysSetting.cost_info">
        <div v-html="sysSetting.cost_info"></div>
      </div>
      <!-- <div class="charge-explain-modal">
        <div class="explain-title">1）直播课时费</div>
        <p class="main-explain-block">每节课上课费用 = 上台人数单价 × 有效出勤学生和老师人数 × 排课时长</p>
        <ul>
          <li>1. 上课老师、学生和助教在教室中的累计时长满10分钟即为有效出勤；</li>
          <li>2. 排课时长指创建课节设置的课节时长，最小计费单位为0.5小时，不足0.5小时按0.5小时计算；</li>
          <li>3. 上台人数单价：以排课时设定的上台人数上限为准，不同直播教室类型的课时单价不同。</li>
        </ul>
        <p class="main-explain-text" style="margin-top: 16px; margin-bottom: 8px">
          温馨提醒：上台人数1vN，1为授课老师，N为同时与老师视频互动学生数；直播课时费将在老师下课后立即结算。
        </p>
        <table style="width: 333px">
          <thead>
            <tr>
              <th>上台人数</th>
              <th>价格标准</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>上台人数1v1</td>
              <td>3元/人/小时</td>
            </tr>
          </tbody>
        </table>
        <p class="main-explain-text">
          示例：王老师排了一节45分钟的课程，选择的直播教室类型为5人上台，安排了1位助教、12位学生。那么，排课时长45分钟记为1小时；全员累计在线时长≥10min，老师+助教+学生共计1+1+12=14人；课时单价3元/人/小时。所以，此节课的直播课时费=1x14x3=42元
        </p>
        <div class="explain-title mt16">2）录制费</div>
        <p class="main-explain-block">录制费 = 录课单价 × 回放视频时长</p>
        <ul>
          <li>1. 结算时间：从回放视频生成后立即结算</li>
          <li>2. 回放视频时长：0.5h起收，不足0.5h的按0.5h结算</li>
          <li>3. 单价：2元/小时</li>
        </ul>
        <p class="main-explain-text">示例：生成了49分26秒的回放视频，不足1h按1h计算，总费用=1(h)*2元/h=2元</p>
        <div class="explain-title mt16">3）流量费</div>
        <p class="main-explain-block">观看回放视频流量费 = 流量单价 × 回放流量</p>
        <p class="main-explain-text">
          目前收费报价：0元（限时免费）<br />
          若后续变更收费，将提前30日通告收费方式及价格标准
        </p>
        <div class="explain-title mt16">4）存储费</div>
        <p class="main-explain-block">存储实际扣费 = 存储单价 × 存储文件大小</p>
        <p class="main-explain-text">
          目前收费报价：0元（限时免费）<br />若后续变更收费，将提前30日通告收费方式及价格标准
        </p>
        <div class="explain-title mt16">5）其他说明</div>
        <div class="main-explain-text">
          余额不足时将限制使用创建直播课、老师和学生进入直播间、老师和学生观看回放视频、在资料云盘或直播间上传文件等功能，请注意及时充值。（余额＜300元时将发送短信提醒，请注意查看。）
        </div>
      </div> -->
    </a-modal>
    <div class="table-operator">
      <a-button @click="exportOrder()">导出</a-button>
    </div>
    <s-table
      ref="table"
      :rowKey="(record) => record.id"
      :columns="columns"
      :data="loadData"
      class="user_management_table"
      style="margin-top: 20px"
    >
      <span slot="order_no" slot-scope="text, record">
        <!-- <a @click="godetailes(record.id)">{{ text }}</a> -->
        {{ text }}
      </span>
      <span slot="number_change_type" slot-scope="text, record">
        <span v-if="text">
          <span v-if="text == 1">
            <span style="color: rgb(82, 196, 26)">+ {{ record.number_change_value }}</span>
          </span>
          <span v-else>
            <span style="color: #e90">- {{ record.number_change_value }}</span>
          </span>
        </span>
      </span>
      <span slot="time" slot-scope="text, record">
        {{ record.created_at | formatDate }}
      </span>
      <!-- <span slot="action" slot-scope="text, record"> </span> -->
    </s-table>
    
  </a-card>
</template>

<script>
import moment from 'moment'
import { STable, Ellipsis } from '@/components'
import { orderList, getSurplus,exportOut } from '@/api/lives'
export default {
  name: 'accountManage',
  components: {
    STable,
    Ellipsis,
  },
  data() {
    return {
      showSearch: false,
      // 表头
      columns: [
        {
          title: '订单号',
          dataIndex: 'order_no',
          fixed: 'left',
          scopedSlots: { customRender: 'order_no' },
        },

        {
          title: '订单类型',
          dataIndex: 'type',
          customRender(text) {
            return text == 1
              ? '上课扣费'
              : text == 2
              ? '录制扣费'
              : text == 3
              ? '充值'
              : text == 4
              ? '赠送'
              : text == 5
              ? '其他'
              : '-'
          },
        },
        {
          title: '变动前余额',
          dataIndex: 'number_before_value',
          align:'center',
          customRender(text) {
            return text || '-'
          },
        },
        {
          title: '余额变动',
          dataIndex: 'number_change_type',
          align:'center',
          scopedSlots: {
            customRender: 'number_change_type',
          },
        },
        {
          title: '变动后余额',
          dataIndex: 'number_after_value',
          align:'center',
          customRender(text) {
            return text || '-'
          },
        },
        {
          title: '创建时间',
          dataIndex: 'created_at',
          width: 200,
          scopedSlots: { customRender: 'time' },
        },
        {
          title: '备注',
          dataIndex: 'remarks',
          width: 200,
          // scopedSlots: { customRender: 'remarks' },
        },
        // {
        //   title: '订单状态',
        //   align: 'center',
        //   dataIndex: 'status',
        //   customRender(text) {
        //     return text == 1 ? '待支付' : text == 2 ? '已完成' : text == 3 ? '已生效' : '-'
        //   },
        // },
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        let postData = {}
        for (let key in this.queryParam) {
          if (this.queryParam[key]) {
            let nature = key
            postData[nature] = this.queryParam[key]
          }
        }
        return orderList(Object.assign(parameter, this.queryParam, { order_no: this.keywords || undefined })).then(
          (res) => {
            return res
          }
        )
      },
      keywords: undefined,
      queryParam: {
        school_id: this.$store.state.user.school,
      },
      showInstructions: false,
      surplus: 0,
      sysSetting: null,
    }
  },
  created() {
    getSurplus({ school_id: this.$store.state.user.school }).then((res) => {
      this.surplus = res.surplus
      this.sysSetting = res.sysSetting
    })
  },
  methods: {
    exportOrder(){
      exportOut(this.queryParam).then(res=>{
          if(res.url&&res.url.url&&res.url.path){
            window.open(res.url.url+res.url.path,'_blank')
          }
      }).catch(err=>{
        if(err.data.message){
          this.$message.error(err.data.message)
        }else{
          this.$message.error('获取导出数据失败~')
        }
      })
    },
    onChange1(date, dateString) {
      this.queryParam.start_time = dateString[0]
      this.queryParam.end_time = dateString[1]
      this.$refs.table.refresh()
    },
    warning() {
      this.$warning({
        title: '提示!',
        content: '请联系平台管理员进行充值~',
      })
    },
    // godetailes(id) {
    //   this.$router.push({
    //     name: 'orderdetails',
    //     query: {
    //       id: id,
    //     },
    //   })
    // },
  },
  watch: {
    queryParam: {
      handler(val) {
        this.$refs.table.refresh()
      },
      deep: true,
    },
  },
}
</script>
<style lang="less" scoped>
.charge-explain-modal .explain-title {
  font-size: 14px;
  margin-bottom: 8px;
  font-weight: 500;
  color: #333;
  line-height: 20px;
}
.charge-explain-modal .main-explain-block {
  width: 816px;
  height: 32px;
  line-height: 32px;
  background: #f7f8f9;
  border-radius: 4px;
  padding-left: 16px;
  margin-left: 21px;
  margin-bottom: 8px;
}
.charge-explain-modal ul {
  margin-bottom: 8px;
  margin-top: 8px;
  li {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666;
    line-height: 20px;
    margin-bottom: 0;
    margin-left: 21px;
    display: -ms-flexbox;
    display: flex;
    justify-self: flex-start;
    -ms-flex-align: center;
    align-items: center;
  }
}
.charge-explain-modal .main-explain-text {
  font-size: 14px;
  font-weight: 400;
  color: #666;
  line-height: 20px;
  margin-left: 21px;
}
.charge-explain-modal .explain-title {
  font-size: 14px;
  margin-bottom: 8px;
  font-weight: 500;
  color: #333;
  line-height: 20px;
}
.charge-explain-modal table tr > td,
.charge-explain-modal table tr > th {
  height: 40px;
  padding-left: 24px;
  border-right: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
}
.charge-explain-modal table tr > th {
  background: #f7f8f9 !important;
}
.charge-explain-modal table {
  border: 1px solid #e8e8e8;
  margin-left: 33px;
  margin-bottom: 16px;
}

.accountBalance {
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #e8e8e8;
  margin-bottom: 16px;
  .balanceNum {
    margin-top: 10px;
    .text {
      font-size: 24px;
      font-weight: 500;
      line-height: 33px;
      margin-right: 24px;
      color: #333;
    }
  }
}
#moreButton {
  position: absolute;
  top: 5px;
  right: 20px;
}
</style>
